import React from 'react';
import LazilyLoad, { importLazy } from 'components/lazilyLoad';
import PropTypes from 'prop-types';
import css from './index.less';

let modules = {};
/**
 * 页面内容预览
 */
export default class PageContentPreview extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  static defaultProps = {
    mod: { list: [] },
  };

  render() {
    // console.log('this.props', this.props);
    const { mod, mod: { list = [] } } = this.props;
    list.forEach((_mod) => {
      if (!modules[_mod.type]) {
        modules[_mod.type] = () => importLazy(import(`modules/${_mod.type}/preview`));
      }
    });

    const props = {
      modules: {
        ...modules // 注意，这里必须要解构赋值
      },
    };

    return (
      <LazilyLoad {...props}>
        {
          ({...components}) => (
            <div className={css.pageContentPreview} style={mod.style}>
              {
                list.map((_mod, index) => {
                  const { type } = _mod;
                  if (components[type]) {
                    class C extends components[type] {}
                    return <C key={index} mod={_mod} />;
                  }
                })
              }
            </div>
          )
        }
      </LazilyLoad>
    );
  }
}
